﻿<!--@Knockout-->
<div style="text-align:center;height:500px; width:800px; margin: 0 auto">
    <div style="max-height:450px" data-bind="dxDataGrid: {
        height: 500,
        dataSource: {
            store: {
                type: 'odata',
                url: 'https://sampleservices.devexpress.com/Northwind.svc/Products'
            }
        },
        columns: columns,
        paging: { pageSize: 8 },
        selection: { mode: selectionMode }
    }"></div>
    <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
        <div style="display:table-cell;vertical-align:middle">Select a Selection Mode:&nbsp;</div>
        <div style="display:table-cell;width:150px" data-bind="dxSelectBox: {
            items: selectionModes,
            value: selectionMode
        }"></div>
    </div>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="demoController" style="text-align:center; height:500px; max-width:800px; margin: 0 auto">
    <div style="height:500px; width:800px">
        <div style="max-height:450px" dx-data-grid="{
            height: 500,
            dataSource: {
                store: {
                    type: 'odata',
                    url: 'https://sampleservices.devexpress.com/Northwind.svc/Products'
                }
            },
            columns: columns,
            paging: { pageSize: 8 },
            bindingOptions: {
                'selection.mode': 'selectionMode'
            }
        }"></div>
        <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
            <div style="display:table-cell;vertical-align:middle">Select a Selection Mode:&nbsp;</div>
            <div style="display:table-cell;width:150px" ng-model="selectionMode" dx-select-box="{
                items: selectionModes
            }"></div>
        </div>
    </div>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div style="text-align:center;height:500px; width:800px; margin: 0 auto">
    <div id="gridContainer" style="max-height:450px"></div>
    <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
        <div style="display:table-cell;vertical-align:middle">Select a Selection Mode:&nbsp;</div>
        <div style="display:table-cell;width:150px" id="selectBoxContainer"></div>
    </div>
</div>
<!--/@jQuery-->